<template>
  <div>
     <header>
      <van-row type="flex" justify="space-between">
        <van-col span="8">
          <router-link to="/layout/Mine">
            <van-icon name="arrow-left" />
          </router-link>
        </van-col>
        <van-col span="8">返回我的页面</van-col>
        <van-col span="8"></van-col>
      </van-row>
    </header>
    <div class="logo">
      <img src="../assets/logo.jpg" alt="" />
      <p>开眼界观天下</p>
    </div>
    <div class="formBody">
      <van-form @submit="onSubmit">
        <van-field
          style="line-height: 40px; font-size: 16px"
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          style="line-height: 40px; font-size: 16px"
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="subbmit">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <div class="register">
        <van-button
          plain
          hairline
          type="info"
          style="width: 70px"
          @click="register"
          >注册</van-button
        >
      </div>
      <div class="miss">
        <van-button plain hairline type="info" style="width: 70px" @click="miss"
          >忘记密码?</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { usernameLogin } from "../api/api";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //   点击登录
    onSubmit() {
      usernameLogin(this.username, this.password).then((res) => {
        // console.log(res);
        if (res.code == 0) {
            this.$notify({ type: 'success', message: '登录成功' });
          this.$store.commit("changeInfo", {
            isLogin: true,
            userInfo: res.data,
          });
          this.$router.push('/layout/Mine')
        }else{
          this.$notify({ type: 'danger', message: '密码或用户名错误' });
        }
      });
    },
    register() {
    this.$router.push('/register')
    },
    miss(){
        this.$router.push('/miss')
    }
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #eee;
}
.logo {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  margin-bottom: 30px;
  img {
    width: 120px;
    height: 120px;
  }
  p {
    margin-top: 20px;
    color: #409eff;
    font-size: 20px;
  }
}
.formBody {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .subbmit {
    margin: 40px 16px 50px 16px;
  }
}
.register {
  width: 50%;
  float: left;
  text-align: center;
}
.miss {
  width: 50%;
  float: right;
  text-align: center;
}
</style>